<template>
  <div>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="url"
      :selection.sync="selection"
      :where="where"
      height="calc(100vh - 320px)"
      tool-class="ele-toolbar-form">
      <!-- 表头工具栏 -->
      <template slot="toolbar">
        <el-form
          :model="where"
          class="ele-form-search"
          size="small"
          @keyup.enter.native="reload"
          @submit.native.prevent>
          <el-row :gutter="10">
            <el-col :md="4">
              <el-form-item>
                <el-input
                  v-model="where.name"
                  clearable
                  placeholder="使用员工"
                  size="small"
                  @clear="reload"/>
              </el-form-item>
            </el-col>
            <el-col :md="4">
              <el-form-item>
                <el-input
                  v-model="where.nickname"
                  clearable
                  placeholder="微信昵称"
                  size="small"
                  @clear="reload"/>
              </el-form-item>
            </el-col>
            <el-col :md="4">
              <el-form-item>
                <el-input
                  v-model="where.wechat"
                  clearable
                  placeholder="微信号"
                  size="small"
                  @clear="reload"/>
              </el-form-item>
            </el-col>
            <el-col :md="8">
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  size="small"
                  type="primary"
                  @click="reload">搜索
                </el-button>
                <el-button icon="el-icon-refresh" @click="reset">刷新</el-button>
                <el-button
                  icon="el-icon-delete"
                  v-if="$hasPermission('serviceplan:delete')"
                  plain
                  size="small"
                  type="danger"
                  @click="remove">删除
                </el-button>
                <el-button
                  icon="el-icon-plus"
                  v-if="$hasPermission('serviceplan:edit')"
                  plain
                  size="small"
                  type="primary"
                  @click="openEdit">编辑
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <!-- 推广市场列 -->
      <template slot="bazaarId" slot-scope="{row}">
        <template v-for="item in bazaar">
            <span v-if="item.id === row.bazaarId"
                  :key="item.id">
              {{ item.name }}
            </span>
        </template>
      </template>

      <!-- 推广分组列 -->
      <template slot="zoneid" slot-scope="{row}">
        <template v-for="item in zone">
            <span v-if="item.id === row.zoneid"
                  :key="item.id">
              {{ item.name }}
            </span>
        </template>
      </template>

      <!-- 性别列 -->
      <template slot="sex" slot-scope="{row}">
        <img v-if="!row.sex" class="el-sex" src="@/assets/image/female.png"/>
        <img v-if="row.sex" class="el-sex" src="@/assets/image/male.png"/>
      </template>

      <!-- 二维码列 -->
      <template slot="qrcode" slot-scope="{row}">
          <span @click="qrcode(row.qrcode)">
            <el-tooltip class="item" content="该微信号未上传二维码" effect="dark" placement="top-start">
              <i v-if="!row.qrcode" class="el-tooltip item el-icon-_eye-close ele-text-placeholder"
                 style="font-size: 18px; cursor: pointer;"></i>
            </el-tooltip>
            <el-tooltip class="item" content="点击查看二维码图片" effect="dark" placement="top-start">
              <i v-if="row.qrcode" class="el-tooltip item el-icon-view" style="font-size: 18px; cursor: pointer;"></i>
            </el-tooltip>
          </span>
      </template>

      <!-- 最后展示时间列 -->
      <template slot="lasttime" slot-scope="{row}">
        <span v-if="row.lasttime">{{ row.lasttime }}</span>
        <span v-else>-</span>
      </template>

      <!-- 状态列 -->
      <template slot="status" slot-scope="{row}">
        <el-switch
          v-model="row.status"
          :active-value="1"
          :inactive-value="0"
          @change="editState(row)"/>
      </template>

      <!-- 操作列 -->
      <template slot="action" slot-scope="{row}">
        <el-popconfirm
          class="ele-action"
          title="确定要删除选中展示微信吗？"
          @confirm="remove(row)">
          <el-link
            slot="reference"
            :underline="false"
            icon="el-icon-delete"
            type="danger">删除
          </el-link>
        </el-popconfirm>
      </template>

    </ele-pro-table>

    <!-- 编辑弹窗 -->
    <service-plan-list-edit :service="service" :serviceId="serviceId" :visible.sync="showEdit" :wechatIds="wechatIds"
                            @countMethod="countMethod" @done="reload"/>

  </div>
</template>

<script>
import servicePlanListEdit from "./service-plan-list-edit";

export default {
  name: 'ServicePlanList',
  components: {servicePlanListEdit},
  props: {
    // 当前落地页ID
    serviceId: Number,
    // 客服列表
    service: Array,
    // 市场列表
    bazaar: Array,
    // 分组列表
    zone: Array
  },
  data() {
    return {
      // 表格数据接口
      url: '/servicePlan/getWechat',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center'
        },
        {
          prop: 'bazaarId',
          slot: 'bazaarId',
          label: '所属市场',
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'zoneid',
          slot: 'zoneid',
          label: '所属分组',
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'name',
          label: '使用员工',
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'nickname',
          label: '微信昵称',
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'wechat',
          label: '微信号',
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          prop: 'phone',
          label: '手机号',
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          width: 80,
          prop: 'sex',
          slot: 'sex',
          label: '性别',
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          width: 80,
          prop: 'qrcode',
          slot: 'qrcode',
          label: '二维码',
          sortable: 'custom',
          showOverflowTooltip: true,
        },
        {
          width: 100,
          prop: 'number',
          label: '展现次数',
          sortable: 'custom',
          showOverflowTooltip: true
        },
        {
          width: 140,
          slot: 'lasttime',
          prop: 'lasttime',
          label: '最后展示时间',
          sortable: 'custom',
          showOverflowTooltip: true
        },
        {
          width: 80,
          prop: 'status',
          label: '状态',
          sortable: 'custom',
          resizable: false,
          slot: 'status'
        },
        {
          width: 100,
          columnKey: 'action',
          resizable: false,
          label: '操作',
          slot: 'action'
        }
      ],
      // 表格搜索条件
      where: {
        serviceId: this.serviceId
      },
      // 微信列表
      wechatIds: [],
      // 表格选中数据
      selection: [],
      // 是否显示编辑弹窗
      showEdit: false
    };
  },

  watch: {
    serviceId() {
      this.where.serviceId = this.serviceId;
      this.reload();
    }
  },

  methods: {

    openEdit() {
      if (!this.$hasPermission("serviceplan:edit")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      const loading = this.$messageLoading('正在请求中..');
      this.$http.post('/servicePlan/getWechatSelected', {serviceId: this.serviceId}).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.wechatIds = res.data.data;
          this.showEdit = true;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },

    qrcode(qrcode) {
      if (qrcode) {
        this.$alert('<img src="' + qrcode + '" style=" width: 270px; height: 270px;"/>', '二维码查看', {
          dangerouslyUseHTMLString: true,
          closeOnClickModal: true,
          customClass: 'el-message-qr',
          showConfirmButton: false
        });
      }
    },

    reload() {
      this.$refs.table.reload({where: this.where});
    },

    countMethod(obj) {
      if (obj) {
        this.$emit('updateMethod', obj);
      }
    },

    delete(serviceId, id) {
      const loading = this.$loading({lock: true});
      this.$http.post('/servicePlan/deleteWechat', {serviceId: serviceId, id: id}).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.$emit('updateMethod', {serviceId: serviceId, count: res.data.count});
          this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },

    reset() {
      for (let key in this.where) {
        this.where[key] = null;
      }
      this.where = Object.assign({}, {serviceId: this.serviceId});
      this.reload();
    },

    remove(row) {
      if (!this.$hasPermission("serviceplan:delete")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      if (row.id) {
        return this.delete(this.serviceId, row.id);
      }
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据')
        return;
      }
      this.$confirm('确定要删除选中展示微信吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.delete(this.serviceId, this.selection.map(d => d.id).join(','));
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    editState(row) {
      const loading = this.$loading({lock: true});
      this.$http.put('/servicePlan/setStatus', {id: row.id, status: row.status}).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message({type: 'success', message: res.data.msg});
        } else {
          row.state = !row.state ? 1 : 0;
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    }
  }
}
</script>

<style scoped>
.el-sex {
  vertical-align: middle;
  height: 16px;
  width: 16px;
}
</style>
